import React from 'react';
import Typography from "@material-ui/core/Typography";
import {Box} from "@material-ui/core";
import {cleaningTexts} from "../../../../../../../assets/functions/functions";

export default function IndicatorDescription(props) {
  const {indicatorDescription, classes} = props

  return (
    <Box style={{color: "#000"}}>
      <Typography><b>Analysis Method</b></Typography>
      <Typography gutterBottom>{indicatorDescription.analysisMethod}</Typography>

      <Typography className={classes.gutterTop}><b>Additional parameters</b></Typography>
      {Object.entries(indicatorDescription.analysisMethodParams).map(([key, value], index) => {
        return (
          <Typography key={index}>
            <li>{cleaningTexts(key)}: <i>{value}</i></li>
          </Typography>
        )
      })}

      {/*<Typography ><b>Analysis Mapping</b></Typography>*/}
      {/*<Typography  gutterBottom>TODO</Typography>*/}

      <Typography className={classes.gutterTop}><b>Visualization Library</b></Typography>
      <Typography gutterBottom>{indicatorDescription.visualizationLibrary}</Typography>

      <Typography className={classes.gutterTop}><b>Visualization Type</b></Typography>
      <Typography gutterBottom>{indicatorDescription.visualizationType}</Typography>

      {/*<Typography ><b>Visualization Mapping</b></Typography>*/}
      {/*<Typography  gutterBottom>TODO</Typography>*/}
    </Box>
  );
}